<template>
    <scroll-view scroll-y="true"  class="scroll-v pageBg"  @scrolltolower="scrolltolower" lower-threshold="50">
		<view :style="{ backgroundImage: `url(${staticBg}mybBj2.png)`}" class="pageBg">
		<view class="top">
			<image :src="userInfo.avatar" mode="" class="headimg" @tap="changeHead()"></image>
			<image src="/static/img/camera.png" mode="" class="camera" @tap="changeHead()"></image>
			<view>
				<view class="name">
                   {{userInfo.student_name}}
				</view>
				<view class="info">
					{{userInfo.school_name}} / {{userInfo.school_college_name}}
				</view>
				<view class="info">
					{{userInfo.school_profession_name}}  / {{userInfo.class_name}}
				</view>
			</view>
		</view>
			<view class="tabs">
				<view class="title-head">
				   <view class="t-h-left">
					   <view class="title-text">我的订单</view>
				   </view>
				   <view class="chageSchool" @tap="goOrders">
					   查看全部订单
					   <image src="/static/img/right-arrow.png" class="right-arrow" mode=""></image>
				   </view>
				</view>
				<view class="order_tabs">
					<view class="order_tabs-item" @tap="golist(index)" v-for="(item,index) in tabs" :key="index">
						<!-- <uni-badge class="badge" text="45"/> -->
						<image :src="item.src" mode="" class="order_img"></image>
						<view class="order_text">{{item.text}}</view>
					</view>
				</view>
			</view>
			<view class="list block">
				<view class="list-item" @tap="goMy">
					<image src="/static/img/ziliao.png" mode="" class="imgIcon"></image>
					个人资料
				</view>
				<view class="list-item">
					<image src="/static/img/wenhao.png" mode="" class="imgIcon imgIcon2"></image>
					常见问题
				</view>
			</view>
			<view class="btnBox">
				<view class="bt" @tap="Logout" style="width:300rpx;height:76rpx;background-color: #ff5d5d;color:#fff;border-color:#ff5d5d;font-size: 28rpx;">
					退出登录
				</view>
			</view>
			</view>
			<tab-bar :current="2"></tab-bar>
		</scroll-view>
</template>
<script>
	import { logout, changeImg, test } from '@/api/user.js'
	import Cache from '../../util/cache';
	import { mapMutations, mapActions, mapGetters } from "vuex";
	export default {
		data() { 
			return {
				avatar:'',
				my:'',
				tabs:[
					{
						src:'/static/img/5.png',
						text:'待付款',
						id:0
					},
					{
						src:'/static/img/1.png',
						text:'已预订',
						id:1
					},
					{
						src:'/static/img/2.png',
						text:'付尾款',
						id:1
					},
					{
						src:'/static/img/3.png',
						text:'已购买'
					},
					{
						src:'/static/img/4.png',
						text:'售后/退款'
					}
				]
			}
		},
		onShow() {
			// this.my = this.user;
			// console.log('onShow',this.my);
		},
		onLoad() {
			// console.log('onLoad');
			// console.log(this.user);
			//this.avatar = this.user.avatar;
			//console.log(this.userInfo);
			this.test();
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		methods: {
			...mapMutations(["logout"]),
			changeHead() {
				changeImg();
			},
			scrolltolower() {
				
			},
			golist(index) {
				if(index == 4) {
					this.$Router.push('/pages/orders/orders?id=' + (index + 2))
				} else {
					this.$Router.push('/pages/orders/orders?id=' + (index + 1))
				}
				
			},
			goOrders() {
				this.$Router.push('/pages/orders/orders')
			},
			gochangeSchool() {
				uni.navigateTo({
					url:'/pages/changeSchool/changeSchool'
				})
			},
			change(e) {
				this.swiper.current = e.detail.current;
			},
			async Logout() {
			  const res =  await logout();
			  if(res.status_code == 200) {
			      this.logout()
				  
				  this.$Router.push("/pages/login/login")
			  }
			},
			goMy() {
				this.$Router.push("/pages/user/user")
			},
			async test() {
				const { data }  = await test();
			}
		}
	}
</script>
<style lang="scss">
	@import "@/static/css/detial.scss";
		.scroll-v {
			height: 100vh;
			width: 100vw;
			overflow-x: hidden;
			background-color: #f5f8fa;
			.swiper-box {
				 height: 325rpx;
			}
			.top {
				width: 750rpx;
				height: 400rpx;
				padding: 186rpx 0 0 36rpx;
				display: flex;
				flex: none;
				color:#fff;
				position: relative;
				.camera {
					width: 46rpx;
					height: 46rpx;
					position: absolute;
					left: 146rpx;
					bottom: 72rpx;
				}
				.name {
					font-size: 32rpx;
					margin-bottom: 14rpx;
					padding-top: 10rpx;
				}
				.info {
					font-size: 25rpx;
					margin-bottom: 10rpx;
				}
				.headimg {
					width: 150rpx;
					height: 150rpx;
					margin-right: 30rpx;
					border-radius: 50%;
				}
			}
			.tabs {
				width: 700rpx;
				margin: 0 auto;
				background-color: #fff;
				border-radius: 26rpx;
				padding: 35rpx 16rpx 35rpx;
				margin-bottom: 20rpx;
			    @include shadow;
				 .title-text {
				   font-weight: bold;
				   font-size: 29rpx;
				}
				.title-head {
					display: flex;
					justify-content: space-between;
					padding: 0 20rpx;
					margin-bottom: 30rpx;
					.t-h-left {
						display: flex;
						
					}
					.chageSchool {
						font-size: 28rpx;
						.right-arrow {
							width: 14rpx;
							height: 22rpx;
							margin-left: 12rpx;
						}
					}
					.qihuan {
					   width: 31rpx;
					   height: 27rpx;
					   margin-right: 10rpx;
					   position: relative;
					   top:4rpx;
					}
				}
                 .order_tabs {
					 display: flex;
					 text-align: center;
					 width: 100%;
					 .order_tabs-item {
							position: relative;
						  .badge {
							  position: absolute;
							  right: 0;
							  top:2rpx;
						  }
						  flex:1;
						  .order_img {
							width: 76rpx;
							height: 76rpx;
						  						
						  }
						  .order_text {
						  	 font-size: 26rpx;
						  }
					 }
					
				 }
		
			}
		}
	  .list {
		  padding: 0 28rpx;
		  background-color: #fff;
		  border-radius: 26rpx;
		  overflow: hidden;
		  @include shadow
		  .list-item {
			  height: 122rpx;
			  display: flex;
			  align-items: center;
			  border-bottom: 1px #f5f5f5 solid;
			  &:last-of-type {
				 border-bottom: none;
			  }
		  }
		  .imgIcon {
			  width: 44rpx;
			  height: 33rpx;
			  margin-right: 20rpx;
			  &.imgIcon2 {
				  width: 41rpx;
				  height: 41rpx;
			  }
		  }
	  }
        .btnBox {
			padding-top: 10vh;
			@include bt-s-1()
		}
</style>
